<template>
    <div class="child-section">
        <buni-header>
            <div class="main">
				<van-overlay :show="isLoading">
				  <div class="empty">
				  	<van-loading type="spinner" color="#1989fa" />
				  </div>
				</van-overlay>
				<div class="module">
					<van-steps :active="active" active-icon="success" active-color="#ff340c">
					  <van-step>融资需求</van-step>
					  <van-step>企业信息</van-step>
					  <van-step>联系人</van-step>
					  <van-step>上传证件</van-step>
					  <van-step>授权书</van-step>
					</van-steps>
				</div>
				<div>
					<van-form @submit="onSubmit" ref="ruleForm" :scroll-to-error='true' :show-error-message='false' label-width='100px'>
						<!-- 联系人信息 -->
						<div class="module">
							<h3>联系人信息</h3>
							<van-field
							  v-model="personData.lxrNmc"
							  name="lxrNmc"
							  label="联系人姓名"
							  required
							  clearable
							  placeholder="请填写联系人姓名"
							  :rules="[{ required: true, message: '请填写联系人姓名' }]"
							/>
							<van-field
							  v-model="personData.sfzjhm"
							  name="sfzjhm"
							  label="身份证号码"
							  required
							  clearable
							  placeholder="请填写身份证号码"
							  :rules="[{ required: true, message: '请填写正确的身份证号码' },{ pattern:pattern1, message: '请填写正确的身份证号码' }]"
							/>
							<van-field
							  v-model="personData.lxdh"
							  name="lxdh"
							  label="手机号码"
							  required
							  clearable
							  placeholder="请填写手机号码"
							  :rules="[{ required: true, message: '请填写正确的手机号码' },{ pattern:pattern2, message: '请填写正确的手机号码' }]"
							/>
							<van-field 
								v-model="personData.sms"
								 center
								 required
								 clearable
								 label="短信验证码"
								 placeholder="请输入验证码"
								 :rules="[{ required: true, message: '请输入验证码' }]"
								 :border="false"
								 use-button-slot>
								<van-button slot="button"  native-type="button" size="small" plain type="info" @click="gainCode">{{time}}</van-button>
						    </van-field>
							<van-field
							  v-model="personData.dzyx"
							  name="dzyx"
							  label="电子邮箱"
							  required
							  clearable
							  placeholder="请填写电子邮箱"
							  :rules="[{ required: true, message: '请填写正确的电子邮箱' },{ pattern:pattern3, message: '请填写正确的电子邮箱' }]"
							/>
							
							
							<van-field
							  readonly
							  clickable
							  :value="personData.zw"
							  label="公司职位"
							  placeholder="点击选择公司职位"
							  @click="showPicker7 = true"
							/>
							<van-popup v-model="showPicker7" position="bottom">
							  <van-picker
								show-toolbar
								:columns="columns7"
								@confirm="onConfirm7"
								@cancel="showPicker7 = false"
							  />
							</van-popup>
							
							<van-field
							  v-model="personData.gddh"
							  label="固定电话"
							  clearable
							  placeholder="请填写固定电话"
							/>
							
							<div class="button">
								<van-button round block plain type="default" native-type="button" @click="handleBack">上一步</van-button>
								<van-button round block type="info" native-type="button" @click="handleNext">下一步</van-button>
							</div>
						</div>
					</van-form>
				</div>
			</div>
        </buni-header>
    </div>
</template>

<script>
import buniHeader from "../../components/buniHeader.vue";
import { Toast } from 'vant';
export default {
    name:'contacts',
    components: {
        buniHeader
    },
    data() {
        return {
			active:2,
			personData:{},
			pattern1: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
			pattern2: /^1[3|4|5|7|8]\d{9}$/,
			pattern3: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
			timer:null,
			isLoading:false,
			isClick: true,
			time: '获取验证码',
			isLoading:false,
			showPicker7:false,
			columns7:['总经理'],
        }
    },
	created() {
		
	},
    methods: {
		handleBack(){
			this.$router.back()
		},
		handleNext(){
			this.$refs.ruleForm.validate().then(()=>{
				this.isLoading = true;
				this.timer = setTimeout(()=>{
					this.isLoading = false;
					this.$router.push({path:"/upload"})
				},500)
			});
		},
		onConfirm7(val) {
		  this.personData.zw = val;
		  this.showPicker7 = false;
		},
		// 获取验证码
		async gainCode() {
		  if (this.isClick) {
			if (/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.personData.lxdh)) {
			  //const res = await sendVerifyCode({ phone: this.personData.lxdh })  // 获取验证码接口
			  this.isClick = false
			  let s = 60
			  this.time = s + 's'
			  let interval = setInterval(() => {
				s--
				this.time = s + 's'
				if (s < 0) {
				  this.time = '重新获取'
				  this.isClick = true
				  clearInterval(interval)
				}
			  }, 1000)
			} else {
			  Toast.fail('请输入正确的手机号码')
			}
		  }
		},
		onSubmit(){
			
		},
    },
	beforeDestroy() {
		clearTimeout(this.timer);
	}
}
</script>
<style scoped lang="scss">
.main{
	width: 10rem;
	background: #083bb9;
	padding: 0 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.empty{
		width: 10rem;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.module{
		width: calc(10rem - 40px);
		padding: 0.133333rem 0.133333rem;
		border-radius: 0.066666rem;
		margin-bottom: 0.133333rem;
		background-color: #fff;
		h3{
			margin: 0.133333rem 0 0.133333rem 0.133333rem;
			font-size: 32px;
		}
		.selection{
			padding: 0 0.346666rem;
			span{
				color: #f00;
			}
		}
		.button{
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
	}
}
</style>
<style type="text/css">
.van-radio{
	margin-bottom: 0.133333rem;
}
.van-button{
	margin-top: 0.266666rem !important;
}
</style>